<template>
	<view class="body" :class="{'no-scroll': isMask}">
		<!-- <view v-if="isMask" class="mask" @click="onMask"></view> -->
		<view class="bg">
			<image :src="$IMAGE_BASE_URL2 + '/yangcan/bg.png'" style="width: 100%; height:671rpx;margin: auto; display: block;"></image>
		</view>
		<view class="top">
			<u-navbar :border-bottom='false' title-color='#fff' back-icon-color='#fff' background="" title="实时氧舱数据"
				:is-fixed='false'></u-navbar>
		</view>
		<view class="lable top">
			<view class="shuju1 bg1">
				<view class="name">
					<image src="@/img/yangcan/ssHR.png"
						style="width: 48rpx;height: 48rpx; margin-right: 10rpx;margin-top: 12rpx;"></image>
					心率
					<view class="danwei">（bpm）</view>
				</view>
				<view class="num">{{deviceInfo.hr?deviceInfo.hr.value:'--'}}</view>
				<view class="qujian"></view>
				<!-- 区间心率 65-82 -->
			</view>
			<view class="shuju1 bg1">
				<view class="name">
					<image src="@/img/yangcan/ssRR.png"
						style="width: 58rpx;height: 58rpx; margin-right: 10rpx;margin-top: 9rpx;"></image>
					呼吸
					<view class="danwei">（次/分钟）</view>
				</view>
				<view class="num">{{deviceInfo.rr?deviceInfo.rr.value:'--'}}</view>
				<view class="qujian"></view>
			</view>
			<view class="shuju1 bg1">
				<view class="name">
					<image src="@/img/yangcan/ssTime.png"
						style="width: 42rpx;height: 42rpx; margin-right: 10rpx; margin-top: 16rpx;"></image>
					剩余时间
					<view class="danwei">（分）</view>
				</view>
				<view class="num">{{deviceInfo[2008]?deviceInfo[2008].value:'--'}}</view>
				
				<view class="qujian"></view>
			</view>
			<view class="shuju1 bg1">
				<view class="name">
					<image src="@/img/yangcan/ssKpa.png" style="width: 75rpx;height: 75rpx; margin-right: 10rpx;">
					</image>
					压力设定
					<view class="danwei">（kpa）</view>
				</view>
				<view class="num">{{deviceInfo[3003]?deviceInfo[3003].value:'--'}}</view>
				<view class="qujian"></view>
			</view>
		</view>
		<view class="lable2">
			<view class="nongdu">
				<view>氧气浓度</view>
				<u-circle-progress bg-color='fffcf9' active-color="#fe723c" :percent="80">
					<view class="u-progress-content">
						<text class='u-progress-info'>{{deviceInfo[2001]?deviceInfo[2001].value/10:'--'}}%</text>
					</view>
				</u-circle-progress>
			</view>
			<view class="nongdu">
				<view>舱内压力</view>
				<u-circle-progress bg-color='fffcf9' active-color="#fe723c" :percent="80">
					<view class="u-progress-content">
						<text class='u-progress-info'>{{deviceInfo[2000]?deviceInfo[2000].value/10:'--'}}kpa</text>
					</view>
				</u-circle-progress>
			</view>
		</view>
		<view class="lable3">
			<view class="list">
				<view class="name">
					<image src="@/img/yangcan/ssWD.png" style="width: 16rpx; height: 32rpx;margin-right: 10rpx;">
					</image>
					温度
				</view>
				<view class="num">{{deviceInfo[2002]?deviceInfo[2002].value/10:'--'}}℃</view>
			</view>
			<view class="list">
				<view class="name">
					<image src="@/img/yangcan/ssO2.png" style="width: 16rpx; height: 32rpx;margin-right: 10rpx;">
					</image>
					制氧浓度
				</view>
				<view class="num">{{deviceInfo[2005]?deviceInfo[2005].value/10:'--'}}%</view>
			</view>
			<view class="list">
				<view class="name">
					<image src="@/img/yangcan/ssCo2.png" style="width: 31rpx; height: 28rpx;margin-right: 10rpx;">
					</image>
					二氧化碳浓度
				</view>
				<view class="num">{{deviceInfo[2004]?deviceInfo[2004].value/100:'--'}}%</view>
			</view>
			<view class="list">
				<view class="name">
					<image src="@/img/yangcan/ssSD.png" style="width: 27rpx; height: 30rpx;margin-right: 10rpx;">
					</image>
					湿度
				</view>
				<view class="num">{{deviceInfo[2003]?deviceInfo[2003].value/10:'--'}}%</view>
			</view>
			<view class="list">
				<view class="name">
					<image src="@/img/yangcan/ssLiuLiang.png" style="width: 23rpx; height: 27rpx;margin-right: 10rpx;">
					</image>
					制氧流量
				</view>
				<view class="num">{{deviceInfo[2006]?deviceInfo[2006].value/10:'--'}}%</view>
			</view>
			<!-- <view class="list">
				<view class="name">
					<image src="@/img/yangcan/ssKT.png" style="width: 30rpx; height: 30rpx;margin-right: 10rpx;"></image>
					空调温度
				</view>
				<view class="num">{{deviceInfo[9000] == 0 ?'关'deviceInfo[9001].value:'--'}}℃</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getCurrentPage
	} from '@/core/app'
	import StorageUtils from "@/utils/StorageUtils";
	import SimDevice from '../../service/mqtt/sim/SimDevice.js';
	import {
		DeviceBasicData
	} from '../../service/mqtt/DeviceConfig.js';
	export default {
		data() {
			return {
				deviceInfo: {}
			}
		},
		// onReady() {
		// 	// this.deviceId = getCurrentPage().query.iotDeviceId;
		// 	this.deviceList = JSON.parse(decodeURIComponent(getCurrentPage().query.deviceList));
		// 	this.mqtt(this.deviceList)
		// },
		onShow() {
			// this.deviceId = getCurrentPage().query.iotDeviceId;
			this.deviceList = JSON.parse(decodeURIComponent(getCurrentPage().query.deviceList));
			this.mqtt(this.deviceList)
		},
		onHide() {
			if (this.mqttPing) {
				clearInterval(this.mqttPing);
				this.simDevice.close();
			}
		},
		onUnload() {
		    console.log('当前页面即将卸载');
		   if (this.mqttPing) {
		   	clearInterval(this.mqttPing);
		   	this.simDevice.close();
		   }
		 },
		methods: {
			mqtt(device) {
				let deviceBasicData = new DeviceBasicData('', '', undefined);
				this.simDevice = new SimDevice();
				let url = '47.97.72.174:1887';
				// let url = '123.60.177.231:1887';
				deviceBasicData.username = '1559108322@qq.com';
				deviceBasicData.password = '123456';
				deviceBasicData.addr = url;
				console.log(url);
				let that = this;
				this.simDevice.clientDataListener = {
					onHandle: (topic, msg) => {
						msg = msg.replace(/'/g, '"');
						console.log(JSON.parse(msg));
						if (JSON.parse(msg).method === 'thing.service.property.post') {
							let info = JSON.parse(msg);
							let item = info.params;
							let data = {}
							if (item == undefined) {
								return false;
							}
							this.deviceInfo = {
								...this.deviceInfo,
								...item,
								...data
							}
							console.log(that.deviceInfo);
						}
					},
					onSetProperty: (requestPayload) => {
						let params = requestPayload.params;
					},
					onConnect(success) {
						// console.log('连接服务器:' + success);
						if (success) {
							device.map(val => {
								that.simDevice.subscribe(val.productKey, val.deviceName)
							})
							that.mqttPing = setInterval(() => {
								that.simDevice.ping()
							}, 30000);
						}
					},
					onClose() {
						console.log('连接关闭');
					}
				};
				this.simDevice.init(deviceBasicData);
				this.simDevice.connectServer();
			},
		}
	}
</script>


<style lang="scss">
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.body {
		padding: 0 28rpx 0;
		color: #040303;
		background-color: #feebd6;
		overflow: hidden;
	}

	.top {
		position: relative;
		z-index: 99;
	}

	.no-scroll {
		position: fixed;
		width: 100%;
		height: 100vh;
		/* 设置为视口高度 */
		overflow: hidden;
	}

	.lable3 {
		display: flex;
		flex-wrap: wrap;
		color: #fa7731;
		margin-bottom: 40rpx;

		.list {
			width: 48%;
			margin: auto;
			background: linear-gradient(to bottom, #fcf3ea, #ffffff);
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
		}

		.name {
			font-size: 26rpx;
			line-height: 32rpx;
			height: 32rpx;
		}

		.num {
			font-size: 58rpx;
			text-align: center;
			line-height: 90rpx;
		}
	}

	.lable2 {
		display: flex;
		flex-wrap: wrap;
		background-color: #fffdfb;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 20rpx;

		.nongdu {
			width: 50%;
			padding-left: calc(13% - 52rpx);
			text-align: center;

			.u-progress-content {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.u-progress-info {
				font-size: 28rpx;
				padding-left: 16rpx;
				letter-spacing: 2rpx;
				color: #f98952;
				font-weight: bold;
			}
		}
	}

	.lable {
		display: flex;
		flex-wrap: wrap;

		.bg1 {
			background: linear-gradient(to right, #f5a94d, #ff6e3b)
		}

		.shuju1 {
			padding: 20rpx;
			width: 48%;
			margin: auto;
			color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			min-height: 183rpx;

			.name {
				font-size: 30rpx;
				display: flex;
				line-height: 75rpx;
			}

			.danwei {
				font-size: 20rpx;
			}

			.num {
				text-align: center;
				font-size: 100rpx;
				line-height: 200rpx;
			}

			.qujian {
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
				height: 40rpx;
			}
		}
	}

	// f5a94d  ff6e3b
</style>